<template>
	<div>
		<div class='search-history'>
			<h2>搜索历史</h2>
			<div @click='deleteSearch'>删除</div>
		</div>
		<ul>
			<li v-for='(item,index) in searchArr' :key='index'>{{item}}</li>
		</ul>
	</div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default{
	data () {
		return {
			searchArr:[]
		}
	},
	created(){
		this.searchArr = JSON.parse( localStorage.getItem('serachList')   );
	},
	methods:{
		deleteSearch(){
			
			MessageBox({
			  title: '',
			  message: '是否删除全部搜索历史记录?',
			  showCancelButton: true
			}).then(()=>{
				localStorage.removeItem("serachList");
				this.searchArr = [];
			})
			
		}
	}
}
</script>

<style scoped lang='scss'>
.search-history{
	display: flex;
	justify-content: space-around;
}
ul{
	display: flex;
	flex-wrap: wrap;
	li{
		margin:6px;
		font-size:16px;
		color:#fff;
		background-color: #ccc;
		border-radius: 12px;
	}
}
</style>
